<template>
  <div>
    <Child :test="data" />
    <div ref="testDynamicChild"></div>
  </div>
</template>
<script setup lang="ts">
import { createApp, onMounted, ref, unref } from 'vue'
import Child from './Child.vue'

const data = ref({
  name: 'test'
})

const dynamicData = ref({
  name: 'dynamic'
})

const testDynamicChild = ref<HTMLElement | null>(null)

let chidlVm: any = null

onMounted(() => {
  const child = document.createElement('div')
  chidlVm = createApp(Child, {
    test: dynamicData.value
  }).mount(child)
  testDynamicChild.value?.appendChild(child)
})

// setInterval(() => {
//   data.value.name = 'test' + Math.random()
//   dynamicData.value.name = 'dynamic' + Math.random()
// }, 5000)
</script>
